<template>
  <div id="app">
    <el-container class="home-container" id="_heightAll">

      <el-header>
        <!--头部标题-->
        <div class="sidebar-logo-container">
          <span @click="goBack">后台管理系统</span>
          &nbsp;&nbsp;
          <i class="el-icon-s-fold" @click="toggleClapse"></i>

        </div>
        <el-button type="info" @click="out">退出</el-button>
      </el-header>

      <!--具体内容-->
      <el-container id="_heightContainer">
        <!--左侧菜单-->

        <el-aside :width="isCollapse ? '64px' : '200px'" class="heightAll">
          <el-menu
              router
              unique-opened
              :collapse="isCollapse"
              :collapse-transition="false"
              background-color="#d8e3e7"
              text-color="#132c33"
              active-text-color="#132c33"

          >
            <el-submenu v-for="item in menuList" :index="item.id + ''" :key="item.id">
              <template slot="title">
                <i class="el-icon-bangzhu"></i>
                <span>{{ item.name }}</span>
              </template>

              <el-menu-item v-for="subMenu in item.children" :index="subMenu.url+''" :key="subMenu.id">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{ subMenu.name }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <!--右侧内容-->
        <el-main>
          <keep-alive>
            <router-view v-if="isRouterAlive" @upList="initMenuList()"/>
            <Background id="_route" v-if="isRouterAlive" class="backgrand"></Background>
          </keep-alive>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>
<script>


import Manager from "@/views/manager/Manager";
import Background from "@/views/Background/Background.vue";

export default {
  name: "BackgroundManage",
  components: {Manager, Background},
  data() {
    return {
      menuList: [],
      isCollapse: false,
      isRouterAlive: true,

    };
  },
  methods: {
    goBack() {
      this.$router.push("/BackgroundManage")
    },
    out() {
      sessionStorage.removeItem("token")
      this.$router.push("/Login")
    },
    goTo() {
      this.$router.push("/ManagerMain")
    },
    toggleClapse() {
      this.isRouterAlive = true
      this.isCollapse = !this.isCollapse;
    },
    initMenuList() {
      this.$axios.postForm("/urlPermission/selectListById").then(response => {
        this.menuList = response.data.data;
      })
    }
  },
  created() {
    this.initMenuList();
  },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.toggle-button {
  background-color: #373d48;
  font-size: 10px;
  text-align: center;
  color: #fff;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.el-card__body, .el-main {
  padding: 0;
}

.el-header {
  background-color: #d8e3e7;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  /*color: #fff;*/
  font-size: 22px;
}

> div {
  display: flex;
  align-items: center;
}

span {
  margin-left: 14px;
}

.el-aside {
  background-color: #d8e3e7;
}

.el-menu {
  border-right: 0;
  /*filter:opacity(50%)*/
}


.el-main {
  background-color: #eaedf1;
}

.home-container {
  height: 100%;
}

#_heightAll, #_heightContainer {
  height: 100%;
}

#app {
  height: 100%;
}

</style>